<!--
 * @Date: 2023-03-27 15:12:12
 * @LastEditTime: 2023-03-31 21:36:08
 * @FilePath: /NLK/src/views/topUpCoin/components/topUpCoinLogs.vue
 * 介绍:充币记录
-->
<script lang="ts" setup>
import { apiTopUpCoinLogs, TopUpCoinLogs } from "@@/api/module/pagingList";
import dayjs from "dayjs";
</script>

<template>
  <h3 class="MT-lg">{{ $t("chong-bi-ji-lu") }}</h3>
  <CrequestList min-height="750rem" :api="apiTopUpCoinLogs">
    <template #item="{ item }: { item: TopUpCoinLogs.ResItem }">
      <div class="listItem T-S-sm">
        <h3>{{ item.remark }}</h3>
        <Cgrid col="3" repeat="1fr">
          <CgridItem justify="start">{{ $t("shu-liang") }}</CgridItem>
          <CgridItem>{{ $t("zhuang-tai") }}</CgridItem>
          <CgridItem justify="end">
            {{ $t("shi-jian") }}
          </CgridItem>
          <CgridItem justify="start">
            {{ item.number }}{{ item.coin?.code }}
          </CgridItem>
          <CgridItem class="C-M1">{{ item.is_confirm_text }}</CgridItem>
          <CgridItem class="T-nowrap" justify="end">
            {{ dayjs(item.created_at).format("MM/DD HH:mm") }}
          </CgridItem>
        </Cgrid>
      </div>
    </template>
  </CrequestList>
</template>

<style lang="less" scoped>
.CrequestList {
  padding: var(--gap-md);
  border: 1rem solid var(--C-OT3);
  border-radius: var(--R-sm);
  .listItem {
    padding: var(--gap-md) 0;
    border-bottom: 1rem solid var(--C-OT3);
  }
}
</style>
